<script lang="ts">
	import type { QuestionInfo } from '$lib/api/proto/resource_exam_api';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { roadmapStore } from '../../store.svelte';
	import ViewChoiceQuestionPart from './ViewChoiceQuestionPart.svelte';
	import ViewSimpleQuestionPart from './ViewSimpleQuestionPart.svelte';
	import ViewTrueOrFalseQuestionPart from './ViewTrueOrFalseQuestionPart.svelte';

	interface Props {
		onClose: () => void;
	}

	const props: Props = $props();

	let questionList = $state([] as QuestionInfo[]);

	async function loadQuestionList() {
		if (
			userStore.userSession == null ||
			userStore.userInfo == null ||
			roadmapStore.selectNodeIdList.length == 0
		) {
			return;
		}
		const res = await callApi(
			appStore.resourceExamApiClient.listByRoadmap({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				nodeId: roadmapStore.selectNodeIdList[0],
				targetMemberUserId:
					roadmapStore.roadmapMode == 'update'
						? userStore.userInfo.userId
						: roadmapStore.targetMemberUserId
			}).response
		);
		if (roadmapStore.roadmapMode == 'update') {
			questionList = res.questionList;
		} else {
			questionList = res.questionList.filter(
				(item) => item.answer?.typeUrl.endsWith('.EmptyAnswer') == false
			);
		}
	}

	loadQuestionList();
</script>

<dialog class="modal modal-open">
	<div class="modal-box w-[calc(100vw-400px)] max-w-none">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => props.onClose()}>✕</button
		>
		<h3 class="text-lg font-bold">查看试题</h3>
		{#if questionList.length == 0}
			<div class="flex justify-center mt-[50px] text-xl font-bold">
				{#if roadmapStore.roadmapMode == 'update'}
					没有试题
				{:else if roadmapStore.roadmapMode == 'view'}
					没有已回答试题
				{/if}
			</div>
		{/if}
		<div class="max-h-[60vh] overflow-y-auto pr-[10px] flex-col space-y-4 pt-[20px] pb-[50px]">
			{#each questionList as question, index}
				<div class="border-2 border-base-200 rounded-box">
					<div class="bg-base-300 rounded-box p-2">
						{index + 1}.
						{#if question.basicInfo?.question?.typeUrl.endsWith('.ChoiceQuestion')}
							选择题
						{:else if question.basicInfo?.question?.typeUrl.endsWith('.TrueOrFalseQuestion')}
							对错题
						{:else if question.basicInfo?.question?.typeUrl.endsWith('.SimpleQuestion')}
							问答题
						{/if}
					</div>
				</div>
				{#if question.answer != undefined}
					{#if question.basicInfo?.question?.typeUrl.endsWith('.ChoiceQuestion')}
						<ViewChoiceQuestionPart
							questionId={question.questionId}
							question={question.basicInfo.question}
							answer={question.answer}
						/>
					{:else if question.basicInfo?.question?.typeUrl.endsWith('.TrueOrFalseQuestion')}
						<ViewTrueOrFalseQuestionPart
							questionId={question.questionId}
							question={question.basicInfo.question}
							answer={question.answer}
						/>
					{:else if question.basicInfo?.question?.typeUrl.endsWith('.SimpleQuestion')}
						<ViewSimpleQuestionPart
							questionId={question.questionId}
							question={question.basicInfo.question}
							answer={question.answer}
						/>
					{/if}
				{/if}
			{/each}
		</div>
	</div>
</dialog>
